<template>
  <div class="all-center h-content flex">
    <div v-infinite-scroll="load"
         class=" w-screen overflow-y-auto overscroll-contain scroll-bar-negitive"
         infinite-scroll-immediate="true">
      <div v-for="item in list" :key="item.problem_id">
        <display-list-item :data="item"></display-list-item>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import DisplayListItem from "@/components/Q&A/DisplayListItem.vue";
import type { QuestionModule } from "@/module/questionModulle";
import { getQuestionHeatList } from "@/utils/api/questions";
import { ref } from "vue";

let list = ref([] as QuestionModule[]);

let offset = 0;
let limit = 10;


const load = () => {
  let cont = 3;
  getQuestionHeatList(offset, limit).then((res) => {
    if (res.data.length !== 0) {
      for (let re of res.data) {
        if (cont-- > 0) {
          re.problem_title = "🔥" + re.problem_title;
        }
        if (re.problem_content.length > 100) {
          re.problem_content = re.problem_content.substring(0, 100) + "...";
        }
        list.value.push(re);
      }
      offset += 10;
      limit += 10;
    }

  });

};

</script>

<style scoped>

.infinite-list {
    height: 100vh;
    /*width: 100vw;*/
    /*list-style: none;*/
}

.scroll-bar-negitive::-webkit-scrollbar {
    display: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25vh;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-success);
}

.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}

</style>
